<template>
    <el-affix>
        <el-header height="auto" class="header">
            <el-avatar fit="cover" :size="75" shape="square">
                <el-image :src="project.logo">
                    <template #error>
                        <el-icon style="width: 2.5em;height: 1.5em" size="25">Logo</el-icon>
                    </template>
                </el-image>
            </el-avatar>
            <el-text><h2>{{project.name}}</h2></el-text>
            <div style="display:flex;align-items: center">
                <el-text style="margin-right: 1em"><h2>发票总额</h2></el-text>
                <el-text><h2>{{ receiptTotal }}元</h2></el-text>
            </div>
            <div style="display:flex;align-items: center">
                <el-text style="margin-right: 1em"><h2>报销总额</h2></el-text>
                <el-text><h2>{{ reimburseTotal }}元</h2></el-text>
            </div>
            <el-button v-if="userStore.account.authority !== 1" type="primary" @click="show = true"><el-icon :size="20"><Money/></el-icon>上传发票</el-button>
        </el-header>
    </el-affix>
    <el-main>
        <el-card>
            <div v-if="receiptList.length" v-for="receipt in receiptList" :key="receipt.id">
                <el-divider style="margin: 1rem 0"/>
                <div class="receipt-header">
                    <div style="display:flex;align-items: center;">
                        <el-text class="receipt-info-title"><h3>|&nbsp;&nbsp;发票号码</h3></el-text>
                        <el-text>{{ receipt.no }}</el-text>
                    </div>
                    <div style="display:flex;align-items: center">
                        <el-text class="receipt-info-title"><h3>|&nbsp;&nbsp;发票名称</h3></el-text>
                        <el-text >{{ decodeURI(receipt.img.slice(receipt.img.lastIndexOf("/") + 1)) }}</el-text>
                    </div>
                    <div style="display:flex;align-items: center">
                        <el-text class="receipt-info-title"><h3>|&nbsp;&nbsp;发票总价</h3></el-text>
                        <el-text>{{ receipt.totalPrice }}元</el-text>
                    </div>
                    <div style="display:flex;align-items: center">
                        <el-text class="receipt-info-title"><h3>|&nbsp;&nbsp;报销额度</h3></el-text>
                        <div style="display:flex;align-items: center" v-if="!receipt.show">
                            <el-text>{{ receipt.reimburse }}元</el-text>
                            <el-button v-if="userStore.account.authority === 1" style="margin-left: 1rem" type="primary"  @click="editReceiptReimburse(receipt)">修改</el-button>
                        </div>
                        <div style="display:flex;align-items: center" v-else>
                            <el-input-number style="width:50%" :min="0" v-model="receipt.newReimburse"/>
                            <el-text style="margin-left: 5px">元</el-text>
                            <el-button style="margin-left: 1rem" type="success" @click="submitReceiptReimburse(receipt)">提交</el-button>
                        </div>
                    </div>
                    <el-button v-if="userStore.account.authority !== 1" style="position: absolute;right: 0;top: -1rem;"  type="danger" @click="removeReceipt(receipt.id)">删除发票</el-button>
                </div>
                <el-divider border-style="dashed" style="margin: 1rem 0"/>
                <div style="min-height: 25em" v-loading="receipt.loading">
                    <vue-office-pdf v-if="receipt.isPdf" :src="receipt.img"
                                    @rendered="handleRenderedPdf(receipt)"/>
                    <el-image v-else :src="receipt.img" @load="receipt.loading = false"/>
                </div>
                <el-divider style="margin: 1rem 0"><el-icon><StarFilled/></el-icon></el-divider>
            </div>
            <el-empty v-else :image-size="200"/>
        </el-card>
        <UploadReceiptDialog :id="id" v-model:show="show" @reload="getReceiptList()"/>
    </el-main>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue'

import UploadReceiptDialog from "@/views/ReceiptManage/components/CreateReceipt.vue";

import {useUserStore} from "@/stores/user"
import {Money, StarFilled} from "@element-plus/icons-vue";
import {deleteReceiptByIdApi, getReceiptListByProjectIdApi, putReceiptReimburseByIdApi} from "@/apis/receiptManage";
import {getProjectByIdApi} from "@/apis/project";
import VueOfficePdf from "@vue-office/pdf";

const userStore = useUserStore()

const props = defineProps(["id"])
const project = ref({})
const receiptList = ref([]);

const receiptTotal = computed(()=>{
    if(receiptList.value.length > 1){
        return receiptList.value.reduce((perv,curr)=>{
            return perv.totalPrice+curr.totalPrice
        })
    }else if(receiptList.value.length === 1) return receiptList.value[0].totalPrice
    else return 0
})
const reimburseTotal = computed(()=>{
    if(receiptList.value.length > 1){
        return receiptList.value.reduce((perv,curr)=>{
            return perv.reimburse+curr.reimburse
        })
    }else if(receiptList.value.length === 1) return receiptList.value[0].reimburse
    else return 0
})
const getProject = () => {
    getProjectByIdApi(props.id).then(res => project.value = res.data)
}
const getReceiptList = () => {
    getReceiptListByProjectIdApi(props.id).then(res => receiptList.value = res.data.map((value,index) => {
        console.log(res.data)
        return {...value,isPdf:value.img.includes(".pdf"),loading:receiptList.value[index]?receiptList.value[index].loading:true,show:false}
    }))
}
const handleRenderedPdf = receipt => {
    document.querySelector('.vue-office-pdf').style.overflow = "visible";
    const pdfDom = document.querySelectorAll('.vue-office-pdf-wrapper')
    pdfDom.forEach(value => {
        value.style.background = "#fff"
        value.style.padding = "30px 0"
        // value.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.5)"
    })
    receipt.loading = false
}
const show = ref(false)
const editReceiptReimburse =  receipt => {
    receipt.newReimburse = receipt.reimburse
    receipt.show = true
}
const submitReceiptReimburse = async receipt => {
    await putReceiptReimburseByIdApi(props.id,receipt.id,receipt.newReimburse)
    getReceiptList()
    receipt.show = false
    ElMessage.success("修改成功")
}
const removeReceipt = id => {
    ElMessageBox.confirm(
        '确定删除吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await deleteReceiptByIdApi(props.id,id)
        ElMessage.success("删除成功")
        getReceiptList()
    }).catch()
}

onMounted(()=>{
    getProject()
    getReceiptList()
})
</script>

<style scoped>
.header {
    background-color: white;
    padding: 1rem 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.receipt-header {
    position: relative;
    padding: 1em 1em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    .receipt-info-title{
        margin-right: 1rem;
        h3{
            width: 85px;
        }
    }
}
.el-menu-item {
    justify-content: center
}

</style>